<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Dynamic ToolTips - This is a customization of the previous example, attaching tooltips to dynamic and static elements based on the title of the anchor. - Example of Bubbling technique</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href='http://yui.yahooapis.com/2.2.2/build/container/assets/container.css'/>

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>
<!-- Bubbling library block //-->
<script type="text/javascript" src='../../../yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript" src='../../../yui-cms/build/tooltips/tooltips.js'></script>
<script type="text/javascript">
    // Creating dynamic links...
	function init() {
		
        var container = YAHOO.util.Dom.get ( 'dynamic-area' );
		for (var i=11;i<=20;i++) {
			var a = document.createElement("a");
			a.id = "link" + i;
			a.href = "http://www.yahoo.com/";
			a.title = "This is the dynamic link number " + i;
			a.innerHTML = i + ".  Hover over me to see my Tooltip (Dynamic Link)";
			container.appendChild(a);
			container.appendChild(document.createElement("br"));
			container.appendChild(document.createElement("br"));
		}
	}
	YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body id="cms-body">
	
  <div id="doc">
	
	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>

	<h2>Examples of Using the Bubbling Technique for ToolTips</h2>

    <p>Dynamic ToolTips - This is a customization of the previous example, attaching tooltips to dynamic and static elements based on the title of the anchor. - Example of Bubbling technique</p>
	<div id="dynamic-area">
		<a title="This is the static link number 1" href="http://www.yahoo.com/" id="link1">1.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 2" href="http://www.yahoo.com/" id="link2">2.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 3" href="http://www.yahoo.com/" id="link3">3.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 4" href="http://www.yahoo.com/" id="link4">4.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 5" href="http://www.yahoo.com/" id="link5">5.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 6" href="http://www.yahoo.com/" id="link6">6.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 7" href="http://www.yahoo.com/" id="link7">7.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 8" href="http://www.yahoo.com/" id="link8">8.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 9" href="http://www.yahoo.com/" id="link9">9.  Hover over me to see my Tooltip</a><br><br>
		<a title="This is the static link number 10" href="http://www.yahoo.com/" id="link10">10.  Hover over me to see my Tooltip</a><br><br>	
	</div>
  </div>



</body>
</html>